<template>
  <div class="search-box">
    <div class="container search">
      <img src="./images/logo.png" alt="" class="logo" />
      <div class="search-right">
        <input
          type="text"
          placeholder="搜索商家或地点"
          class="search-input"
          v-model="inputValue"
          @focus="showHistory"
          @blur="noShowHistory"
        />
        <!-- <div v-show="isShowHistory"> -->
        <div class="search-Records" v-show="isShowHistory">
          <div class="Records-top">
            <span>搜索记录</span>
            <span @click="deleteInputValueList">删除历史记录</span>
          </div>
          <ul class="Records-box">
            <li
              v-for="(item, index) in searchStore.inputValueList"
              :key="index"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <ul class="search-Keyword" v-show="isShowSearchKeyword">
          <li v-for="(item, index) in searchKeywordLIst" :key="index">
            {{ item.editorWord }}
          </li>
        </ul>
        <button class="iconfont icon-sousuo search-button" @click="goxxx" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
};
</script>

<script setup>
import { ref, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import useSearchStore from "../../stores/search.js";
import { getSearchKeyword } from "../../api/search/index.js";

const searchStore = useSearchStore();
const router = useRouter();

// 收集input数据
const inputValue = ref("");

// 跳转页面
const goxxx = () => {
  // 添加input历史记录
  const flag = searchStore.inputValueList.every((item) => {
    return item !== inputValue.value;
  });
  if (flag) searchStore.inputValueList.push(inputValue.value);

  // 跳转页面
  // router.push({
  //   path: "/",
  //   query: {
  //     inputValue: inputValue.value,
  //   },
  // });
  inputValue.value = "";
  isAutomaticClear.value = true;
};

const isShowSearchKeyword = ref(false); // 是否展示搜索关键字
const isShowHistory = ref(false); // 是否展示历史记录

// 输入框获得焦点显示历史记录框
const showHistory = () => {
  inputValue.value
    ? (isShowSearchKeyword.value = true)
    : (isShowHistory.value = true);
};

// 输入框失去焦点隐藏历史记录框
const noShowHistory = () => {
  isShowHistory.value = false;
  isShowSearchKeyword.value = false;
};
// 删除历史记录
const deleteInputValueList = () => {
  console.log(1);
  searchStore.inputValueList = [];
};

// 根据搜索关键字获取数据
const searchKeywordLIst = ref([]);
const getSearchKeywordLIst = async (value) => {
  const res = await getSearchKeyword(value);
  searchKeywordLIst.value = res.data.suggestItems;
};

// 是否搜索后自动清空的数据
const isAutomaticClear = ref(false);

// 展示搜索关键字
watch(
  () => inputValue.value,
  (newVal, oldVal) => {
    nextTick();
    if (newVal) {
      getSearchKeywordLIst(newVal);
      isShowSearchKeyword.value = true;
      isShowHistory.value = false;
    } else {
      if (isAutomaticClear.value) {
        isAutomaticClear.value = false;
      } else {
        isShowHistory.value = true;
      }
      isShowSearchKeyword.value = false;
      searchKeywordLIst.value = [];
    }
  }
);
</script>

<style scoped>
.search-box {
  width: 100%;
  height: 157px;
  background-color: #fff;
  padding-top: 28px;
  box-shadow: 0 2px 27px 0 rgb(0 0 0 / 10%);
}
.search {
  display: flex;
  justify-content: space-between;
}
.logo {
  width: 126px;
  height: 46px;
}
.search-right {
  height: 40px;
  padding-right: 300px;
  /* display: flex; */
  position: relative;
  z-index: 2;
}
.search-input {
  position: relative;
  border: 1px solid #e5e5e5;
  width: 470px;
  height: 100%;
  outline: none;
  font-size: 15px;
  /* text-decoration: 2em; */
  text-indent: 1em;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}
.search-Records {
  position: absolute;
  left: 0;
  right: 0;
  width: 470px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
  box-sizing: border-box;
  top: 40px;
  z-index: 1;
  cursor: pointer;
}
.Records-top {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #999;
  margin-bottom: 10px;
}
.Records-box {
  /* display: flex; */
  float: left;
  justify-content: start;
  color: #666;
}
.Records-box li {
  display: inline-block;
  margin: 0 10px 10px 0;
}
.search-Keyword {
  position: absolute;
  left: 0;
  right: 0;
  width: 470px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 5px 0 rgb(0 0 0 / 10%);
  box-sizing: border-box;
  top: 40px;
  z-index: 1;
  cursor: pointer;
}
.search-Keyword li {
  color: #666;
  padding: 4px 0;
}

.search-button {
  background-color: #ffc300;
  width: 80px;
  height: 100%;
  line-height: 100%;
  text-align: center;
  border-radius: 0 4px 4px 0;
  padding: 0px;
  margin: 0px;
  border: 0px;
  outline: none;
}
</style>
